<template>
	<view class="login">
		<image class="logo"
			src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/basicprofile.png"></image>
		<view class="btn flex" @click="login">
			手机号快捷登录
			<button v-if="checkboxValue1.length" open-type="getPhoneNumber" @getphonenumber="getphonenumber"></button>
		</view>
		<view class="p" @click="toPath('/pages/login/phone')">
			输入手机号登录/注册
		</view>

		<view class="font flex ios" @click="changeRadius">
			<u-checkbox-group v-model="checkboxValue1">
				<u-checkbox :label="label" :name="name" shape="circle"></u-checkbox>
			</u-checkbox-group>
			已阅读并同意
			<text id="user">《聚力网球俱乐部 用户协议》</text>
			<text id="ys">《聚力网球俱乐部 隐私政策》</text>
			<view class="pos">

			</view>
		</view>
	</view>
</template>

<script>
	import WebSocketClass from '@/common/webSocket.js'

	const app = getApp()
	import {
		consumerCodeGainUserPhone,
		queryAuthentication
	} from '@/api/login'

	export default {
		data() {
			return {
				label: '',
				checkboxValue1: [],
				name: 1
			}
		},
		methods: {
			getphonenumber(e) {
				uni.login({
					success: (res) => {
						let {
							code
						} = res;
						let loginCode = code;
						let phoneCode = e.detail.code;

						consumerCodeGainUserPhone({
							loginCode,
							phoneCode,
							// // 聚力
							appId: "wx5b3843197d34d53b",
							// appSecret: "c2540b7c35dbd34b41f171456958052d"
						}).then(res => {
							let {
								authentication
							} = res;
							uni.setStorageSync('userinfo', res)
							uni.setStorageSync('token', authentication);
							uni.setStorageSync('openId', res.openId);
							uni.setStorageSync('lineBoole', true);
							setTimeout(() => {
								this.web();
							}, 100)
							this.$event.notify('login', {
								updata: true,
							})

							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			},
			web() {
				// 如果已经有sockt实例
				if (app.globalData.socketObj) {
					// 如果sockt实例未连接
					if (!app.globalData.socketObj.isConnect) {
						app.globalData.socketObj.initSocket()
					}
				} else {
					// 如果没有sockt实例，则创建
					app.globalData.socketObj = new WebSocketClass(`wss://travel.daoziji.com/wss`, 60)
					app.globalData.socketObj.initSocket()
				}
			},
			login() {
				if (!this.checkboxValue1.length) {
					this.toast('请先同意隐私政策和用户协议')
				}
			},
			changeRadius(e) {
				let id = e.target.id;
				if (id) {
					uni.navigateTo({
						url: `/pages/login/web?type=${id}`
					})
					return;
				}
				this.checkboxValue1 = this.checkboxValue1.length ? [] : [1]
			},
			toPath(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		height: 100vh;
		flex-direction: column;
		display: flex;
		align-items: center;

		.logo {
			width: 200rpx;
			height: 200rpx;
			margin-top: 148rpx;
			margin-bottom: 188rpx;
		}

		.btn {
			width: 600rpx;
			height: 90rpx;
			opacity: 1;
			border-radius: 40rpx;
			background: rgba(4, 134, 254, 1);
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0pt;
			position: relative;
			color: rgba(249, 249, 249, 1);

			button {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}

		.p {
			font-size: 36rpx;
			font-weight: 400;
			letter-spacing: 0pt;
			line-height: 52.13rpx;
			color: rgba(4, 134, 254, 1);
			margin-top: 20rpx;
		}
	}

	.font {
		font-size: 20rpx;
		font-weight: 400;
		letter-spacing: 0pt;
		color: rgba(172, 172, 172, 1);
		position: absolute;
		bottom: 80rpx;
		width: 100%;
		left: 0;

		.pos {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		text {
			position: relative;
			z-index: 9;
			color: rgba(4, 134, 254, 1);
		}
	}
</style>